import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';

const scale = GLOBAL.SCALE;
const dayData = ['付款期限', '交货期限', '预付（授信）账期', '赊销（授信）账期'];
const moneyAndamount = ['运费成本', '额外运费', '票据成本单价', '资金成本单价'];
export class BaseItem extends Component {
	constructor(props) {
		super(props);
	}

	_getUnit = (keyTitle, val) => {
		let { currencyName } = this.props || {};
		if (val == '无') return null;
		if (moneyAndamount.some(item => item == keyTitle)) {
			return `${currencyName}/吨`;
		} else if (dayData.some(item => item == keyTitle)) {
			return '天';
		}
		return null;
	}

	render() {
		const { label, labelStyle, valueStyle, beforeValueDesc, afterValueDesc, beforeValue, beforeValueOnPress, afterValueOnPress, smallTitle } = this.props;
		return (
			<View style={styles.itemView}>
				{label ? <Text style={[styles.label, labelStyle]}>{label}</Text> : null}
				<View style={styles.itemViewValue}>
					{smallTitle ? <Text style={[styles.value, valueStyle, { marginRight: 10 * scale }]}>{smallTitle || ''}</Text> : null}
					{beforeValueDesc ? <Text style={[styles.value, valueStyle]}
						onPress={() => beforeValueOnPress && beforeValueOnPress()}>{beforeValueDesc}{this._getUnit(label, beforeValueDesc)}</Text> : null}
					{beforeValueDesc ? <Text style={[styles.value, valueStyle]}>  —>  </Text> : null}
					<Text style={[styles.value, valueStyle, { fontWeight: 'bold' }]} onPress={() => afterValueOnPress && afterValueOnPress()}>{afterValueDesc}{this._getUnit(label, afterValueDesc)}</Text>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	itemView: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 12 * scale
	},
	itemViewValue: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap'
	},
	label: {
		fontSize: 12 * scale,
		width: 102 * scale
	},
	value: {
		fontSize: 12 * scale
	}
})